<template>
  <view class="Base">
    <view class="title">
      <view class="left">
        <uni-icons color="black" size="28" type="left" @click="back"></uni-icons>
      </view>
      <view class="center-container">
        <!-- 左侧渐隐数据 -->
        <view
            v-if="swiper.currentIndex > 0"
            class="side-item"
            :style="{ opacity: 0.5 }"
        >
          {{ dataList[swiper.currentIndex - 1] }}
        </view>
        <!-- 当前激活数据 -->
        <view class="active-item">
          {{ dataList[swiper.currentIndex] }}
        </view>
        <!-- 右侧渐隐数据 -->
        <view
            v-if="swiper.currentIndex < dataList.length - 1"
            class="side-item"
            :style="{ opacity: 0.5 }"
        >
          {{ dataList[swiper.currentIndex + 1] }}
        </view>

      </view>
      <view class="right" @click="openCalendar">
        <image
          src="/static/icon/icon-calendar.png"
          mode="aspectFill"
          style="width:24px;height:24px;"
        />
        <!-- <uni-icons type="calendar" size="24" color="black"></uni-icons> -->
      </view>

    </view>
    <swiper
        class="swiper-container"
        :current="swiper.currentIndex"
        @change="handleSwiperChange"
        :indicator-dots="false"
        :vertical="false"
        :pagination="false"
        :autoplay="false"
        style="height: calc(90% - 0rpx);"
    >
      <swiper-item>
        <Heart :selectDateInfo="selectDateInfo" @tips="handleTips" />
      </swiper-item>
      <swiper-item>
        <Sleep :selectDateInfo="selectDateInfo" @tips="handleTips" />
      </swiper-item>
      <swiper-item>
        <Activity :selectDateInfo="selectDateInfo" @tips="handleTips" />
      </swiper-item>
      <swiper-item>
        <Pressure :selectDateInfo="selectDateInfo" @tips="handleTips" />
      </swiper-item>
    </swiper>








<!--      <Heart v-if="headTitleArr[0] === 'Heartrate'" :selectDateInfo="selectDateInfo" @tips="handleTips" />
      <Blood v-if="headTitleArr[0] === 'BloodOxygen'" :selectDateInfo="selectDateInfo" @tips="handleTips" />
      <Pressure v-if="headTitleArr[0] === 'Pressure'" :selectDateInfo="selectDateInfo" @tips="handleTips" />
      <Activity v-if="headTitleArr[0] === 'Activity'" :selectDateInfo="selectDateInfo" @tips="handleTips" />
      <Temperature v-if="headTitleArr[0] === 'Temperature'" :selectDateInfo="selectDateInfo" @tips="handleTips" />-->

<!--    <scroll-view scroll-y class="scroll">
      <view
          class="chart_item"
          style="height:288rpx"
      >

      </view>

      <view class="placeholder"></view>
    </scroll-view>-->

<!--    <BottomDrawer
        v-model="showTip"
        :show-title="false"
        maskBg="rgba(19, 19, 19, 0.9)"
        background="linear-gradient(180deg, #B9E8FF 0%, #FFFFFF 51.46%);
        "
    >
      <view class="box">
        <view class="head">
          <image class="w-92rpx" :src="tips.icon" mode="widthFix"></image>
          <text class="title">{{ tips.title }}</text>
        </view>
        <scroll-view scroll-y class="tip">
          <view> {{ tips.tip }}</view>
        </scroll-view>
      </view>
    </BottomDrawer>-->
    <uni-calendar
        ref="calendar"
        :insert="false"
        :lunar="false"
        start-date="2024-01-01"
        :end-date="today"
        @monthSwitch="calendarMonthChange"
        @change="calendarChange"
    />
  </view>
</template>
<script>
import DateChooser from "@/pages/ring/components/DateChooser.vue";
import dayjs from "dayjs";

import Heart from "./heart.vue";
import Blood from "./blood.vue";
import Pressure from "./pressure.vue";
import Activity from "./activity.vue";
import Sleep from "./sleep.vue";
import Temperature from "./temperature.vue";

import BottomDrawer from "@/components/drawer/BottomDrawer.vue";

export default {
  components: {
    DateChooser,
    Heart,
    Blood,
    Pressure,
    Activity,
    Sleep,
    Temperature,
    BottomDrawer,
  },
  data() {
    return {
      date: "",
      today: dayjs().format("YYYY-MM-DD"),
      dateKeys: 0,
      headTitle: "",
      headTitleArr: [],
      selectDateInfo: {},
      showTip: false,
      tips: {
        tip: "",
        icon: "",
        title: "",
      },
      swiper: {
        currentIndex: 1
      },
      dataList: ["体征", "睡眠", "活动", "恢复"]
    };
  },

  onLoad(opt) {
    console.log("opt", opt);

    const option = opt;

    console.log("option", option);
    this.swiper.currentIndex = this.dataList.indexOf(option.title)
    this.headTitleArr = option.type?.split(" ") || [];
    this.headTitle = option.title;
    this.date = option.date;
    this.dateKeys = new Date().getTime();

    console.log(this.date);
  },

  methods: {
    openCalendar() {
      this.$refs.calendar.open();
    },
    closeCalender() {
      this.$refs.calendar.close();
    },
    calendarChange(date) {
      this.closeCalender();
      this.selectDateInfo = date;
      // this.selected  = [{totalScore:0,colorLevel:1,dateFormat: date.fulldate}];
      console.log("select full date", this.selectDateInfo)
    },

    calendarMonthChange(date) {
      const month = ("0" + date.month).slice(-2);
      const ym = `${date.year}-${month}`;
      this.getCalendarSleepDayDot(ym);
    },
    chooseDate(value) {
      console.log("chooseDate", value);
      const { type, startMoment: startTime, endMoment: endTime } = value;
      this.selectDateInfo = { type, startTime: dayjs(startTime).format("YYYY-MM-DD"), endTime: dayjs(endTime).format("YYYY-MM-DD") };
      console.log("this.selectDateInfo", this.selectDateInfo);
    },
    handleSwiperChange(data) {
      console.log("swiper change");
      console.log(data);
      this.swiper.currentIndex = data.detail.current;
    },
    back() {
      uni.navigateBack();
    },

    handleTips(tips) {
      // this.tips = tips;
      // this.showTip = true;

      uni.navigateTo({
        url: `../illustrate/index?type=${tips}`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.scroll {
  height: calc(100vh - var(--status-bar-height) - 44rpx - 40rpx - 200rpx);

  .placeholder {
    height: 10rpx;
  }
}

.Base {
  width: 100vw;
  height: 100vh;
  background-color: #cee7f8;
  padding: 0 24rpx;
  padding-top: var(--status-bar-height);
  background-image: url('@/static/bg/app-background.png'); /* 背景图路径 */
  background-size: cover; /* 覆盖整个页面 */
  background-position: center; /* 居中显示 */
  background-repeat: no-repeat; /* 不重复 */
  background-attachment: fixed; /* 固定背景，不随内容滚动 */
  position: relative; /* 确保子元素定位正常 */
  .navbar {
    // background-color: #0f0f0f;
    :deep(.navbar_wrap) {
      .left-btn {
        padding: 0;
      }
    }
  }

  .dataSelect_component {
    margin-top: 16rpx;
  }

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 88rpx;
    margin: 20rpx 0 10rpx 0;

    & > view {
      //flex: 1;
      min-height: 10rpx;
    }
  }

  .center-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .active-item {
    color: black;
    font-weight: 500;
    text-align: center;
    font-size: 36rpx;
  }

  .side-item {
    color: black;
    font-size: 30rpx;
    margin: 0 20rpx;
  }
}

.bottom_compute_tips_day {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(141, 141, 141, 0.84);
  font-family: Inter;
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 32rpx;
}

.box {
  padding: 40rpx;
  color: black;

  .head {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .title {
      margin-left: 8rpx;

      font-size: 32rpx;
      font-weight: 500;
      line-height: 50rpx;
      text-align: left;
    }
  }

  .tip {
    white-space: pre-line;
    height: 400rpx;
    overflow-y: scroll;
  }

  .w-92rpx {
    width: 92rpx;
  }


}


</style>
